<template>
<div v-if="showComponent" style = "background-color: black; height: 100%;">
  <component :url ="screenInfo.url" :is="getComponentByCategory(screenInfo.category)"/>
</div>
</template>

<script setup name="Screen Viewer" lang="ts">
import {getScreenByScreenId} from '@/api/manu/pubToolScreen'; 
import {screenInfoVO} from '@/api/manu/pubToolScreen/types';
import pictureViewer from './components/pictureViewer.vue';
import pdfViewer from './components/pdfViewer.vue';
import msOfficeViewer from './components/msOfficeViewer.vue';

const screenId:string = useRoute().params.id as string;
const screenInfo = ref<screenInfoVO>();
const showComponent = ref(false);

const getScreen = async () => {
  const res = await getScreenByScreenId(screenId);  
  screenInfo.value = res.data;
  showComponent.value = true;
};


const getComponentByCategory = (category:string) => {
  switch(category) {
    case 'picture':
      return pictureViewer;
    case 'pdf':
      return pdfViewer;
    case 'ms_office':
      return msOfficeViewer;
    default:
      return pictureViewer;
  }
}
onMounted(() => {
  getScreen()
});

</script>
